<template>
  <div>doubleCounter: {{ doubleCounter }}</div>
  <div @click="addCounter">counter: {{ counter }}</div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, defineProps } from 'vue'
import { useStore } from 'vuex'
import { key } from '../store'

export default defineComponent({
  name: 'ComVuex1',
  setup () {
    const store = useStore(key)
    const counter = computed(() => store.state.counter)
    const doubleCounter = computed(() => counter.value * 2)
    const addCounter = () => store.commit('add')
    return {
      counter,
      doubleCounter,
      addCounter
    }
  }
})
</script>

<style lang="scss" scoped>

</style>